<template>
  <Teleport to="body">
    <ul
        class="ctx-menu"
        :style="{ left: position.x + 'px', top: position.y + 'px' }"
    >
      <li @click="emit('command', { cmd:'addChild' })">添加子节点</li>
      <li @click="emit('command', { cmd:'addSibling' })">添加同级节点</li>
      <li @click="emit('command', { cmd:'edit' })">编辑节点</li>
      <li @click="emit('command', { cmd:'remove' })">删除节点</li>

      <!-- 仅节点有子节点时才出现折叠/展开 -->
      <li v-if="node && node.nodeData.children?.length">
        <span v-if="node.getData('expand') !== false"
              @click="emit('command', { cmd:'collapse' })">折叠节点</span>
        <span v-else
              @click="emit('command', { cmd:'expand' })">展开节点</span>
      </li>

      <li @click="emit('command', { cmd:'layout' })">整理布局</li>
    </ul>
  </Teleport>
</template>

<script setup>
defineProps({ position: Object, node: Object })
const emit = defineEmits(['command'])
</script>

<style scoped>
.ctx-menu{
  position:fixed;z-index:9999;background:#fff;border:1px solid #dcdfe6;
  border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);
  list-style:none;padding:4px 0;margin:0;font-size:14px;
}
.ctx-menu li{padding:6px 16px;cursor:pointer;user-select:none;}
.ctx-menu li:hover{background:#f2f2f2;}
</style>